<template>
  <div class="nav">
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1"
          ><router-link
            to="/data1"
            style="text-decoration: none;"
            v-if="fullWidth > 800"
            ><span>交易数据</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="2"
          ><router-link
            to="/data2"
            style="text-decoration: none;"
            v-if="fullWidth > 800"
            ><span>任务信息</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="3"
          ><router-link
            to="/data3"
            style="text-decoration: none;"
            v-if="fullWidth > 800"
            ><span>账户信息</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="4" class="KK" v-if="fullWidth > 800"
          ><router-link to="/k" style="text-decoration: none;"
            ><span>净值曲线</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="5" class="Strategy" v-if="fullWidth > 800"
          ><router-link to="/strategy" style="text-decoration: none;"
            ><span>我的策略</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="6" class="Test" v-if="fullWidth > 800"
          ><router-link to="/test" style="text-decoration: none;"
            ><span>测试</span></router-link
          ></el-menu-item
        >
        <!-- <el-menu-item index="6" class="FactorsList"
          ><router-link to="/factorslist" style="text-decoration: none;"
            ><span>因子大厅</span></router-link
          ></el-menu-item
        > -->
        <el-menu-item index="7" class="Mobliedata2" v-if="fullWidth < 800"
          ><router-link to="/mobliedata2" style="text-decoration: none;"
            ><span>任务详情</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="8" class="Mobliedata3" v-if="fullWidth < 800"
          ><router-link to="/mobliedata3" style="text-decoration: none;"
            ><span>账户详情</span></router-link
          ></el-menu-item
        >
        <el-menu-item index="9" class="Mobliedata1" v-if="fullWidth < 800"
          ><router-link to="/mobliedata1" style="text-decoration: none;"
            ><span>交易详情</span></router-link
          ></el-menu-item
        ><el-button @click="Socketsend">刷新</el-button>
      </el-menu>
    </div>
    <div class="expand" v-if="fullWidth < 800">
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><router-link to="/k" style="text-decoration: none;"
              ><span>净值曲线</span></router-link
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><router-link to="/strategy" style="text-decoration: none;"
              ><span>我的策略</span></router-link
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { socketsend } from '../assets/js/websocketTest.js'
export default {
  data() {
    return {
      activeIndex: '1',
      isShow: false,
      fullWidth: document.documentElement.clientWidth // 实时屏幕宽度
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy: function() {
    window.removeEventListener('resize', this.handleResize)
  },
  mounted: function() {
    this.login()
  },
  methods: {
    // login() {
    //   createSocket('ws://175.27.243.236:6060/test')
    // },
    login() {
      // createSocket('ws://112.124.67.119:6060/test')
    },
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth
    },
    Socketsend() {
      console.log(1122222222222)
      socketsend()
    }
  }
}
</script>
<style Lang="less" scoped>
.Test {
  display: none;
}
.router-link {
  text-decoration: none;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
span {
  font-size: 20px;
  color: #000000;
}
.btn_login {
  padding: 10px;
}
@media screen and (max-width: 540px) {
  span {
    font-size: 14px;
  }
  .el-menu-item {
    padding: 10px;
  }
  .el-menu--horizontal > .el-menu-item {
    line-height: 40px;
  }
  .KK {
    display: none;
  }
  .expand {
    margin-top: 20px;
  }
}
</style>
